<template>
  <div class="notNetVehicles">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="80" inline>
        <Row>
          <Col :span="4">
            <FormItem label="车牌号">
              <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请输入车牌号" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="经营企业">
              <i-input v-model="formDataSearch.vehicleCompanyName" placeholder="请输入经营企业" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="区县名称">
              <i-input v-model="formDataSearch.vehicleCountyName" placeholder="请输入区县名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="乡镇名称">
              <i-input v-model="formDataSearch.vehicleTownsName" placeholder="请输入乡镇名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="省份状态">
              <i-select v-model="formDataSearch.positionProvinceState" filterable placeholder="请选择省份状态" clearable @on-change="formDataSearch.vehicleOffLineDay = ''">
                <Option value="1">省内</Option>
                <Option value="2">省外</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="运营省份">
              <i-input v-model="formDataSearch.positionProvinceName" placeholder="请输入运营省份" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="地市状态">
              <i-select v-model="formDataSearch.positionCityState" filterable placeholder="请选择地市状态" clearable @on-change="formDataSearch.vehicleOffLineDay = ''">
                <Option value="1">市内</Option>
                <Option value="2">市外</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="运营地市">
              <i-input v-model="formDataSearch.positionCityName" placeholder="请输入运营地市" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="经营类型">
              <i-input v-model="formDataSearch.vehicleOperateTypeName" placeholder="请输入经营类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="周期类型">
              <i-select v-model="formDataSearch.vehicleCycleType" filterable placeholder="请选择周期类型" clearable @on-change="formDataSearch.vehicleOffLineDay = ''">
                <Option value="1">运营统计</Option>
                <Option value="2">停运统计</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="4" v-if="formDataSearch.vehicleCycleType == 1">
            <FormItem label="运营周期">
              <i-select v-model="formDataSearch.vehicleOffLineDay" filterable placeholder="请选择周期类型" clearable>
                <Option value="7">7天以下</Option>
                <Option value="30">30天以下</Option>
                <Option value="60">60天以下</Option>
                <Option value="90">90天以下</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="4" v-if="formDataSearch.vehicleCycleType == 2">
            <FormItem label="停运周期">
              <i-select v-model="formDataSearch.vehicleOffLineDay" filterable placeholder="请选择周期类型" clearable>
                <Option value="7">7天以上</Option>
                <Option value="30">30天以上</Option>
                <Option value="60">60天以上</Option>
                <Option value="90">90天以上</Option>
              </i-select>
            </FormItem>
          </Col>
          <FormItem>
            <Button type="primary" @click="searchSubmit">搜索</Button>
          </FormItem>
        </Row>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <!--        <Button type="primary" @click="e => {showEnterYzCarDialog = true}" class="btn-style">导入运政车辆</Button>-->
        <!--        <Button type="primary" @click="e => {showEnterYysCarDialog = true}" class="btn-style">导入运营商车辆</Button>-->
<!--        <Button type="primary" @click="addInfo" class="btn-style">添加</Button>-->
        <!--        <Button type="warning" @click="exportData" class="btn-style">批量导出</Button>-->
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>

    <Modal title="导入运政车辆" v-model="showEnterYzCarDialog" width="30%" :footer-hide="true">
      <Form ref="formDataYzRef" :model="formDataYz" :rules="ruleYz" label-position="right" :label-width="100">
        <FormItem label="文件" prop="fileName">
          <div style="display: flex;">
            <Upload action="" accept=".xls,.xlsx" :before-upload="yzUploadBefore">
              <Button type="primary" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
            <span style="margin-left: 10px" v-if="formDataYz.file">{{ formDataYz.file.name }}</span>
          </div>
        </FormItem>
        <FormItem label="执行描述">
          <i-input type="textarea" :rows="4" v-model="formDataSearch.deptName" placeholder="描述信息" clearable/>
        </FormItem>
        <div style="display: flex;flex-direction: row;justify-content: end">
          <Button type="primary" @click="submitYz">获取</Button>
          <Button @click="showEnterYzCarDialog = false" style="margin-left: 10px">取消</Button>
        </div>
      </Form>
    </Modal>

    <Modal title="导入运营商车辆" v-model="showEnterYysCarDialog" width="30%" :footer-hide="true">
      <Form ref="formDataYysRef" :model="formDataYys" :rules="ruleYys" label-position="right" :label-width="100">
        <FormItem label="运营商" prop="vehicleOperatorName">
          <i-input v-model="formDataYys.vehicleOperatorName" placeholder="请输入车牌号码" clearable/>
        </FormItem>
        <FormItem label="文件" prop="fileName">
          <div style="display: flex;">
            <Upload action="" accept=".xls,.xlsx" :before-upload="yysUploadBefore">
              <Button type="primary" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
            <span style="margin-left: 10px" v-if="formDataYys.file">{{ formDataYys.file.name }}</span>
          </div>
        </FormItem>
        <FormItem label="执行描述">
          <i-input type="textarea" :rows="4" v-model="formDataSearch.deptName" placeholder="描述信息" clearable/>
        </FormItem>
        <div style="display: flex;flex-direction: row;justify-content: end">
          <Button type="primary" @click="submitYys">获取</Button>
          <Button @click="showEnterYysCarDialog = false" style="margin-left: 10px">取消</Button>
        </div>
      </Form>
    </Modal>

    <Drawer title="信息添加/修改" v-model="showEdit" width="48%" :mask-closable="false" :draggable="true" :styles="formOperationStyles">
      <Form ref="formDataRef" :model="formData" :rules="ruleFormData" label-position="right" :label-width="100">
        <Row>
          <Col :span="8">
            <FormItem label="车牌号" prop="vehiclePlateNo">
              <i-input v-model="formData.vehiclePlateNo" placeholder="请输入车牌号码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车牌颜色" prop="vehiclePlateColor">
              <i-select v-model="formData.vehiclePlateColor" filterable placeholder="请选择车牌颜色" clearable>
                <Option v-for="item in vehiclePlateColorList" :key="item.name" :value="item.code">{{
                    item.name
                  }}
                </Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车架号" prop="vehicleVinNo">
              <i-input v-model="formData.vehicleVinNo" placeholder="请输入车辆识别代码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="发动机号" prop="vehicleEngineNo">
              <i-input v-model="formData.vehicleEngineNo" placeholder="请输入发动机号" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="经营类型" prop="vehicleOperateType">
              <i-input v-model="formData.vehicleOperateType" placeholder="请输入经营类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="燃料种类" prop="vehicleFlueType">
              <i-input v-model="formData.vehicleFlueType" placeholder="请输入燃料种类" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆类型" prop="vehicleType">
              <i-input v-model="formData.vehicleType" placeholder="请输入车辆类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆品牌" prop="vehicleBrand">
              <i-input v-model="formData.vehicleBrand" placeholder="请输入车辆品牌" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆型号" prop="vehicleModel">
              <i-input v-model="formData.vehicleModel" placeholder="请输入车辆型号" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="经营企业" prop="vehicleCompanyName">
              <i-input v-model="formData.vehicleCompanyName" placeholder="请输入经营企业" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="联系人" prop="vehicleOwnerName">
              <i-input v-model="formData.vehicleOwnerName" placeholder="请输入车主联系人" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="联系方式" prop="vehicleOwnerPhone">
              <i-input v-model="formData.vehicleOwnerPhone" placeholder="请输入车主联系手机" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆总质量" prop="vehicleTotalWeight">
              <i-input v-model="formData.vehicleTotalWeight" placeholder="请输入车辆总质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="核定载质量" prop="vehiclePermitWeight">
              <i-input v-model="formData.vehiclePermitWeight" placeholder="请输入核定载质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="牵引总质量" prop="vehicleTractionWeight">
              <i-input v-model="formData.vehicleTractionWeight" placeholder="请输入准牵引总质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="外廓-长" prop="vehicleLength">
              <i-input v-model="formData.vehicleLength" placeholder="请输入外廓尺寸-长(mm)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="外廓-宽" prop="vehicleWidth">
              <i-input v-model="formData.vehicleWidth" placeholder="请输入外廓尺寸-宽(mm)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="外廓-高" prop="vehicleHigh">
              <i-input v-model="formData.vehicleHigh" placeholder="请输入外廓尺寸-高(mm)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆轴数" prop="vehicleAxle">
              <i-input v-model="formData.vehicleAxle" placeholder="请输入车辆轴数" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="初登日期" prop="vehicleCertificateDate">
              <DatePicker
                  type="date"
                  style="width: 100%"
                  v-model="formDataSearch.vehicleCertificateDate"
                  format="yyyy-MM-dd"
                  placement="bottom-end"
                  placeholder="请选择初登日期"
              />
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="省份编码" prop="vehicleProvinceCode">
              <i-input v-model="formData.vehicleProvinceCode" placeholder="请输入省份编码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="省份名称" prop="vehicleProvinceName">
              <i-input v-model="formData.vehicleProvinceName" placeholder="请输入省份名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="地市编码" prop="vehicleCityCode">
              <i-input v-model="formData.vehicleCityCode" placeholder="请输入地市编码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="地市名称" prop="vehicleCityName">
              <i-input v-model="formData.vehicleCityName" placeholder="请输入地市名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="区县编码" prop="vehicleCountyCode">
              <i-input v-model="formData.vehicleCountyCode" placeholder="请输入区县编码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="区县名称" prop="vehicleCountyName">
              <i-input v-model="formData.vehicleCountyName" placeholder="请输入区县名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="乡镇名称" prop="vehicleTownsName">
              <i-input v-model="formData.vehicleTownsName" placeholder="请输入乡镇名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="运输证号" prop="vehicleTransportNo">
              <i-input v-model="formData.vehicleTransportNo" placeholder="请输入车牌号码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="机关编码" prop="certCountyCode">
              <i-input v-model="formData.certCountyCode" placeholder="请输入车牌号码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="发证机关" prop="certCountyName">
              <i-input v-model="formData.certCountyName" placeholder="请输入车牌号码" clearable/>
            </FormItem>
          </Col>
        </Row>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="submitFormData">保存</Button>
          <Button @click="showEdit = false" style="margin-left: 10px">取消</Button>
        </div>
      </Form>
    </Drawer>

  </div>
</template>
<script setup>


import {inject, onMounted, reactive, ref, resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
import {systemDictList} from "../../util/commonInterfaces";

const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

/**
 * 是否显示 导入运政车辆的弹窗
 */
const showEnterYzCarDialog = ref(false)

const formDataYz = reactive({
  file: null
})

const formDataYzRef = ref()
const formOperationStyles = {//表单左侧移出css
  height: 'calc(100% - 55px)',
  overflow: 'auto',
  paddingBottom: '53px',
  position: 'static'
}

const ruleYz = {
  fileName: [
    {required: true, message: '请选择文件', trigger: 'blur'}
  ],
}

const submitYz = () => {
  formDataYzRef.value.validate((valid) => {
    if (valid) {

    }
  })
}

/**
 * 是否显示 导入运营商车辆的弹窗
 */
const showEnterYysCarDialog = ref(false)

const formDataYys = reactive({
  file: null,
  fileName: "",
  vehicleOperatorName: ""
})

const formDataYysRef = ref()

const ruleYys = {
  fileName: [
    {required: true, message: '请选择文件', trigger: 'blur'}
  ],
  vehicleOperatorName: [
    {required: true, message: '请输入运营商名称', trigger: 'blur'}
  ],
}

const submitYys = () => {
  formDataYysRef.value.validate((valid) => {
    if (valid) {

    }
  })
}

/**
 * 显示表单的添加和修改
 */
const showEdit = ref(false)
/**
 * 显示数据的删除弹窗
 */
const showDelete = ref(false)
const deleteDataUuid = ref("")
const formData = ref({})

const vehiclePlateColorList = [
  {code: 1, name: '蓝色'},
  {code: 2, name: '黄色'},
  {code: 3, name: '黑色'},
  {code: 4, name: '白色'},
  {code: 5, name: '绿色'},
  {code: 93, name: '黄绿色'},
  {code: 9, name: '其他'}
]

const formDataRef = ref()

const ruleFormData = {
  vehiclePlateNo: [
    {required: true, message: '请输入车牌号', trigger: 'blur'}
  ],
  vehiclePlateColor: [
    {required: true, message: '请选择车牌颜色', trigger: 'blur', type: "number"}
  ],
  vehicleCityCode: [
    {required: true, message: '请输入地市编码', trigger: 'blur'}
  ],
  vehicleCityName: [
    {required: true, message: '请输入地市名称', trigger: 'blur'}
  ],
}

const submitFormData = () => {
  formDataRef.value.validate((valid) => {
    if (valid) {
      let msg = $ViewUIPlus.Message.loading({
        content: '保存中...',
        duration: 0
      });
      $axios.post(apiUrl.supervisoryAreaCollectVehicleSaveOrUpdate, formData.value).then((res) => {
        msg()
        showEdit.value = false
        xdTableRef.value.tableLoadData(true)
      }).catch((err) => {
        msg()
      })
    }
  })
}
// 搜索
const formDataSearch = reactive({
  vehicleInternet:1,
  vehicleCycleType:'1',
  vehicleOffLineDay:'7',
})

/**
 * 运政车辆文件选择
 */
const yzUploadBefore = (e) => {
  formDataYz.file = e
  formDataYz.fileName = e.name
  return false
}
/**
 * 运营商车辆文件选择
 */
const yysUploadBefore = (e) => {
  formDataYys.file = e
  formDataYys.fileName = e.name
  return false
}

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.supervisoryAreaCollectVehiclePageList,//请求地址
  method: 'post',//请求方式
  where: {
    vehicleInternet:1
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '车牌号', minWidth: 120, key: 'vehiclePlateNo', tooltip: true,},
    {title: '车牌颜色', minWidth: 120, key: 'vehiclePlateColor', tooltip: true, render: (h, params) => {
        if (params.row.vehiclePlateColor == 1) {//蓝色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'primary'}, '蓝色');
        } else if (params.row.vehiclePlateColor == 2) {//黄色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '黄色');
        } else if (params.row.vehiclePlateColor == 5) {//绿色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '绿色');
        } else if (params.row.vehiclePlateColor == 95) {//黄绿色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '黄绿色');
        } else {//其他
          return h(resolveComponent('Tag'), {type: 'dot', color: 'error'}, '其他');
        }
      }
    },
    {title: '经营类型', minWidth: 120, key: 'vehicleOperateTypeName', tooltip: true,},
    {title: '车辆类型', minWidth: 130, key: 'vehicleType', tooltip: true,},
    {title: '经营企业', minWidth: 220, key: 'vehicleCompanyName', tooltip: true,},
    {title: '车主联系人', minWidth:180, key: 'vehicleOwnerName', tooltip: true,},
    {title: '联系电话', minWidth: 120, key: 'vehicleOwnerPhone', tooltip: true,},
    {title: '省内运营', minWidth: 140, key: 'positionProvinceState', tooltip: true,render: (h, params) => {
        if (params.row.positionProvinceState == 2) {
          return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '省外运营');
        } else if (params.row.positionProvinceState == 1) {
          return h(resolveComponent('Tag'), { type:'dot',color: "primary"}, "省内运营");
        }
      }},
    {title: '运营省份', minWidth: 140, key: 'positionProvinceName', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionProvinceName}`)
      }},
    {title: '市内运营', minWidth: 150, key: 'positionCityState', tooltip: true,render: (h, params) => {
        if (params.row.positionCityState == 2) {
          return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '市外运营');
        } else if (params.row.positionCityState == 1) {
          return h(resolveComponent('Tag'), { type:'dot',color: "primary"}, "市内运营");
        }
      }},
    {title: '运营地市', minWidth: 140, key: 'positionCityName', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionCityName}`)
      }},
    {title: '停运天数', minWidth: 140, key: 'vehicleOffLineDay', tooltip: true, render: (h, params) => {
      return h('span',params.row.vehicleOffLineDay?params.row.vehicleOffLineDay + '天':'0天')
    }},
    {title: '所属地区', minWidth: 180, key: 'vehicleProvinceName', tooltip: true, render: (h, params) => {
        return h('span', {}, `${params.row.vehicleProvinceName} - ${params.row.vehicleCityName} - ${params.row.vehicleCountyName}`)
      }},
    {title: '乡镇名称', minWidth: 120, key: 'vehicleTownsName', tooltip: true,},
    {title: '发证机关', minWidth: 180, key: 'certCountyName', tooltip: true,},
    {title: '定位时间', minWidth: 160, key: 'vehiclePositionDate', tooltip: true,},
  ],
  pagingParameters: {// 分页参数
    page: 'pageNo',
    limit: 'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor: [
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色
  transportTypeList: [],//经营类型
  personTypeList: [],//从业类型
  selectData: {},//选中数据
  formOperation: false,//弹框状态
  formTitle: '',//弹框标题
  formData: {
    username: 'gtjt_llb',
    password: 'sersllb123',
  },//表单数据
});

onMounted(async () => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
  state.transportTypeList = await systemDictList({type: 'transport_type'})
})

//搜索方法
const searchSubmit = () => {
  let data = Object.assign({}, formDataSearch);
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

/**
 * 显示删除的弹窗
 */
const deleteData = (e) => {
  let msg = $ViewUIPlus.Message.loading({
    content: '删除中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryAreaCollectVehicleDelete, {uuid: e}).then((res) => {
    msg()
    xdTableRef.value.tableLoadData(true)
  }).catch((err) => {
    msg()
  })
}

/**
 * 添加信息
 */
const addInfo = () => {
  formData.value = {}
  showEdit.value = true
}

/**
 * 导出数据
 */
const exportData = () => {
  let msg = $ViewUIPlus.Message.loading({
    content: '导出中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryAreaCollectVehicleExport, formDataSearch).then((res) => {
    msg()
    if (!!res) {
      window.open(`${apiUrl.imgUrl}${res.data.data}`)
    }
  }).catch((err) => {
    msg()
  })
}
</script>

<style lang="less">
.notNetVehicles {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 41px);
  }

  .btn-style {
    position: relative;
    top: -8px;
    margin-left: 10px;
  }
}
</style>
